<template>
  <div class="box">
    <!-- 拖拽复制 -->
    <div class="list-group">
      <draggable 
        :list="list"
        :clone="clone"
        :group="{name: 'people', pull: 'clone', put: false}"
      >
        <div
            class="list-group-item"
            v-for="element in list"
            :key="element.name"
          >
            {{ element.name }}
          </div>
      </draggable>
    </div>

    <div class="list-group">
      <draggable 
        :list="list2"
        group="people"
      >
        <div
            class="list-group-item"
            v-for="element in list2"
            :key="element.name"
          >
            {{ element.name }}
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'dragable',
  components: {
    draggable
  },
  data () {
    return {
      list: [
        { name: "John", id: 0 },
        { name: "Joao", id: 1 },
        { name: "Jean", id: 2 }
      ],
      list2: [
        { name: "Juan", id: 0 },
        { name: "Edguard", id: 1 },
        { name: "Johnson", id: 2 },
      ],
    }
  },
  props: {
  },
  watch: {
  },
  created () {
  },
  mounted () { },
  methods: {
    clone ({ name }) {
      return { name, id: this.list2.length }
    }
  }
}
</script>
<style scoped lang='less'>
.box {
  display: flex;
  width: 200px;
}
.list-group:first-child {
  margin-right: 20px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: .75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .125);
}
</style>
